#password {
  margin: auto;
  padding: 0 24px;
  width: 100%;
  max-width: 1200px;
  min-height: calc(~'100vh - 84px');
  display: flex;
  flex-direction: column;
  justify-content: center;

  .wrapper {
    margin: 0 auto;
    width: 50%;
    text-align: center;

    .submit {
      margin-top: 20px;
    }
  }
}

body.dark {
  #password {
    .wrapper {
      .ant-input-password {
        .ant-input-prefix {
          color: @dark-text-color;
        }

        .ant-input {
          color: @dark-text-color;
          background-color: @dark-bg-color;
          border-color: @dark-text-color-9;
        }

        .ant-input-suffix {
          i {
            color: @dark-text-color-8;
            &:hover {
              color: @dark-text-color;
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  #password {
    .wrapper {
      width: 80%;
    }
  }
}

@media screen and (max-width: 480px) {
  #password {
    .wrapper {
      width: 100%;
    }
  }
}
